doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content='')
        meta(name='author', content='')

        title Creative - Start Bootstrap Theme

        // Favicon
        link(rel='icon', type='image/x-icon', href='assets/favicon.ico')

        // Bootstrap Icons
        link(href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css', rel='stylesheet')

        // Google fonts
        link(href='https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700', rel='stylesheet')
        link(href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic', rel='stylesheet', type='text/css')

        // SimpleLightbox plugin CSS
        link(href='https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css', rel='stylesheet')

        // Core theme CSS (includes Bootstrap)
        link(href='css/styles.css', rel='stylesheet')

    body#page-top

        // Navigation
        nav#mainNav.navbar.navbar-expand-lg.navbar-light.fixed-top.py-3
            .container.px-4.px-lg-5
                a.navbar-brand(href='#page-top') Start Bootstrap
                button.navbar-toggler.navbar-toggler-right(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
                    span.navbar-toggler-icon
                #navbarResponsive.collapse.navbar-collapse
                    ul.navbar-nav.ms-auto.my-2.my-lg-0
                        li.nav-item
                            a.nav-link(href='#about') About
                        li.nav-item
                            a.nav-link(href='#services') Services
                        li.nav-item
                            a.nav-link(href='#portfolio') Portfolio
                        li.nav-item
                            a.nav-link(href='#contact') Contact

        // Masthead
        header.masthead
            .container.px-4.px-lg-5.h-100
                .row.gx-4.gx-lg-5.h-100.align-items-center.justify-content-center.text-center
                    .col-lg-8.align-self-end
                        h1.text-white.font-weight-bold Your Favorite Place for Free Bootstrap Themes
                        hr.divider
                    .col-lg-8.align-self-baseline
                        p.text-white-75.mb-5
                            | Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached!
                        a.btn.btn-primary.btn-xl(href='#about') Find Out More

        // About
        section#about.page-section.bg-primary
            .container.px-4.px-lg-5
                .row.gx-4.gx-lg-5.justify-content-center
                    .col-lg-8.text-center
                        h2.text-white.mt-0 We've got what you need!
                        hr.divider.divider-light
                        p.text-white-75.mb-4
                            | Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!
                        a.btn.btn-light.btn-xl(href='#services') Get Started!

        // Services
        section#services.page-section
            .container.px-4.px-lg-5
                h2.text-center.mt-0 At Your Service
                hr.divider
                .row.gx-4.gx-lg-5
                    .col-lg-3.col-md-6.text-center
                        .mt-5
                            .mb-2
                                i.bi-gem.fs-1.text-primary
                            h3.h4.mb-2 Sturdy Themes
                            p.text-muted.mb-0 Our themes are updated regularly to keep them bug free!
                    .col-lg-3.col-md-6.text-center
                        .mt-5
                            .mb-2
                                i.bi-laptop.fs-1.text-primary
                            h3.h4.mb-2 Up to Date
                            p.text-muted.mb-0 All dependencies are kept current to keep things fresh.
                    .col-lg-3.col-md-6.text-center
                        .mt-5
                            .mb-2
                                i.bi-globe.fs-1.text-primary
                            h3.h4.mb-2 Ready to Publish
                            p.text-muted.mb-0 You can use this design as is, or you can make changes!
                    .col-lg-3.col-md-6.text-center
                        .mt-5
                            .mb-2
                                i.bi-heart.fs-1.text-primary
                            h3.h4.mb-2 Made with Love
                            p.text-muted.mb-0 Is it really open source if it's not made with love?

        // Portfolio
        #portfolio
            .container-fluid.p-0
                .row.g-0
                    .col-lg-4.col-sm-6
                        a.portfolio-box(href='assets/img/portfolio/fullsize/1.jpg', title='Project Name')
                            img.img-fluid(src='assets/img/portfolio/thumbnails/1.jpg', alt='...')
                            .portfolio-box-caption
                                .project-category.text-white-50
                                    | Category
                                .project-name
                                    | Project Name
                    .col-lg-4.col-sm-6
                        a.portfolio-box(href='assets/img/portfolio/fullsize/2.jpg', title='Project Name')
                            img.img-fluid(src='assets/img/portfolio/thumbnails/2.jpg', alt='...')
                            .portfolio-box-caption
                                .project-category.text-white-50
                                    | Category
                                .project-name
                                    | Project Name
                    .col-lg-4.col-sm-6
                        a.portfolio-box(href='assets/img/portfolio/fullsize/3.jpg', title='Project Name')
                            img.img-fluid(src='assets/img/portfolio/thumbnails/3.jpg', alt='...')
                            .portfolio-box-caption
                                .project-category.text-white-50
                                    | Category
                                .project-name
                                    | Project Name
                    .col-lg-4.col-sm-6
                        a.portfolio-box(href='assets/img/portfolio/fullsize/4.jpg', title='Project Name')
                            img.img-fluid(src='assets/img/portfolio/thumbnails/4.jpg', alt='...')
                            .portfolio-box-caption
                                .project-category.text-white-50
                                    | Category
                                .project-name
                                    | Project Name
                    .col-lg-4.col-sm-6
                        a.portfolio-box(href='assets/img/portfolio/fullsize/5.jpg', title='Project Name')
                            img.img-fluid(src='assets/img/portfolio/thumbnails/5.jpg', alt='...')
                            .portfolio-box-caption
                                .project-category.text-white-50
                                    | Category
                                .project-name
                                    | Project Name
                    .col-lg-4.col-sm-6
                        a.portfolio-box(href='assets/img/portfolio/fullsize/6.jpg', title='Project Name')
                            img.img-fluid(src='assets/img/portfolio/thumbnails/6.jpg', alt='...')
                            .portfolio-box-caption.p-3
                                .project-category.text-white-50
                                    | Category
                                .project-name
                                    | Project Name

        // Call to action
        section.page-section.bg-dark.text-white
            .container.px-4.px-lg-5.text-center
                h2.mb-4 Free Download at Start Bootstrap!
                a.btn.btn-light.btn-xl(href='https://startbootstrap.com/theme/creative/') Download Now!

        // Contact
        section#contact.page-section
            .container.px-4.px-lg-5
                .row.gx-4.gx-lg-5.justify-content-center
                    .col-lg-8.col-xl-6.text-center
                        h2.mt-0 Let's Get In Touch!
                        hr.divider
                        p.text-muted.mb-5
                            | Ready to start your next project with us? Send us a messages and we will get back to you as soon as possible!
                .row.gx-4.gx-lg-5.justify-content-center.mb-5
                    .col-lg-6

                        // * * * * * * * * * * * * * * *
                        // * * SB Forms Contact Form * *
                        // * * * * * * * * * * * * * * *

                        // This form is pre-integrated with SB Forms.
                        // To make this form functional, sign up at
                        // https://startbootstrap.com/solution/contact-forms
                        // to get an API token!

                        form#contactForm(data-sb-form-api-token='API_TOKEN')

                            // Name input
                            .form-floating.mb-3
                                input#name.form-control(
                                    type='text',
                                    placeholder='Enter your name...',
                                    data-sb-validations='required'
                                )
                                label(for='name') Full name
                                .invalid-feedback(data-sb-feedback='name:required')
                                    | A name is required.

                            // Email address input
                            .form-floating.mb-3
                                input#email.form-control(
                                    type='email',
                                    placeholder='name@example.com',
                                    data-sb-validations='required,email'
                                )
                                label(for='email') Email address
                                .invalid-feedback(data-sb-feedback='email:required')
                                    | An email is required.
                                .invalid-feedback(data-sb-feedback='email:email')
                                    | Email is not valid.

                            // Phone number input
                            .form-floating.mb-3
                                input#phone.form-control(
                                    type='tel',
                                    placeholder='(123) 456-7890',
                                    data-sb-validations='required'
                                )
                                label(for='phone') Phone number
                                .invalid-feedback(data-sb-feedback='phone:required')
                                    | A phone number is required.

                            // Message input
                            .form-floating.mb-3
                                textarea#message.form-control(
                                    type='text',
                                    placeholder='Enter your message here...',
                                    style='height: 10rem;',
                                    data-sb-validations='required'
                                )
                                label(for='message') Message
                                .invalid-feedback(data-sb-feedback='message:required')
                                    | A message is required.

                            // Submit success message
                            //
                            // This is what your users will see when the form
                            // has successfully submitted

                            #submitSuccessMessage.d-none
                                .text-center.mb-3
                                    .fw-bolder Form submission successful!
                                    | To activate this form, sign up at
                                    br
                                    a(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms

                            // Submit error message
                            //
                            // This is what your users will see when there is
                            // an error submitting the form

                            #submitErrorMessage.d-none
                                .text-center.text-danger.mb-3 Error sending message!

                            // Submit Button
                            .d-grid
                                button#submitButton.btn.btn-primary.btn-xl.disabled(type='submit') Submit

                .row.gx-4.gx-lg-5.justify-content-center
                    .col-lg-4.text-center.mb-5.mb-lg-0
                        i.bi-phone.fs-2.mb-3.text-muted
                        div +1 (555) 123-4567

        // Footer
        footer.bg-light.py-5
            .container.px-4.px-lg-5
                .small.text-center.text-muted
                    | Copyright &copy; 2023 - Company Name

        // Bootstrap core JS
        script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js')

        // SimpleLightbox plugin JS
        script(src='https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js')

        // Core theme JS
        script(src='js/scripts.js')

        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        // * *                               SB Forms JS                               * *
        // * * Activate your form at https://startbootstrap.com/solution/contact-forms * *
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

        script(src='https://cdn.startbootstrap.com/sb-forms-latest.js')
